import Icon from '@/components/Icon'
import useInitState from '@/hooks/useInitState'
import { userProfileActionCreator } from '@/store/actions/profile'
import { getToken } from '@/utils/token'
import { NavBar, Input } from 'antd-mobile'
import React, { useEffect, useRef, useState } from 'react'
import { useHistory } from 'react-router-dom'
import io, { Socket } from 'socket.io-client'
import styles from './index.module.scss'

type Message = {
  type: 'robot' | 'user'
  text: string
}

const Chat = () => {
  const history = useHistory()

  const { userProfile } = useInitState(userProfileActionCreator).profile

  // 定义一个状态 消息数组
  const [messages, setMessages] = useState<Message[]>([
    { type: 'robot', text: '你好' }, // 机器人
    { type: 'user', text: '你也好!!!' }, // 用户
  ])

  // 将来发送消息， 都需要滚动滚动条到底部
  // 监听messages消息列表数组变化了，
  useEffect(() => {
    // 函数会在messages变化时，自动触发
    const div = listRef.current!

    // 获取消息列表的dom  设置滚动距离为最大距离（内容实际高度-本身高度）
    div.scrollTop = div.scrollHeight - div.offsetHeight
  }, [messages])

  const listRef = useRef<HTMLDivElement>(null)

  // const client = xx
  // useState
  // useRef

  const clientRef = useRef<Socket | null>(null) // 创建ref对象  存储client实例

  useEffect(() => {
    // 利用socket.io-client与服务器建立连接
    const client = io('http://toutiao.itheima.net', {
      transports: ['websocket'],
      query: {
        token: getToken().token,
      },
    })

    clientRef.current = client

    // 注册监听事件
    // client.on(事件名, () => {})

    client.on('connect', () => {
      // 一旦与服务器成功连接就会执行
      console.log('连接成功了。。。')

      // 链接成功后， 页面中小智多一条消息  小智准备就绪，随时等待你的提问
      setMessages((prevState) => {
        return [
          ...prevState,
          {
            type: 'robot',
            text: '小智准备就绪，随时等待你的提问',
          },
        ]
      })
    })

    client.on('disconnect', () => {
      console.log('连接断开了。。。')
    })

    client.on('message', (data) => {
      // 服务端发送了消息， 就会执行这个函数
      // data就是发送过来的消息
      console.log('服务端消息来了', data)

      // 希望的是  基于上一次的状态 得到新状态
      // setMessages([
      //   ...messages,
      //   {
      //     type: 'robot',
      //     text: data.msg,
      //   },
      // ])

      // 将服务端返回的数据 添加到messages中去 =》 回调函数的形式修改状态！！！
      setMessages((prevState) => {
        return [
          ...prevState,
          {
            type: 'robot',
            text: data.msg,
          },
        ]
      })
    })

    // 如何监听服务端发过来的消息？
    // 如何发消息给服务器？  client.emit(约定好的事件名， 值)

    // setTimeout(() => {
    //   // 在延时器中模拟， 必须等websocket链接成功后， 才能去发消息
    //   client.emit('message', {
    //     msg: '世界上最帅的是谁？',
    //     timestamp: Date.now(),
    //   })
    // }, 4000)

    return () => {
      // 组件卸载时， 断开连接
      client.close()
    }
  }, [])

  const [inputValue, setInputValue] = useState('')

  const handleEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // console.log(e.key, e.keyCode)
    if (e.key === 'Enter' && inputValue.trim()) {
      // console.log('按下回车， 发消息给后端')
      // 1.发消息给后端
      clientRef.current?.emit('message', {
        msg: inputValue,
        timestamp: Date.now(),
      })
      // 2.自己的消息同步到消息列表中去
      setMessages((prevState) => {
        return [
          ...prevState,
          {
            type: 'user',
            text: inputValue,
          },
        ]
      })
      // 3. 清空
      setInputValue('')
    }
  }

  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className="fixed-header" onBack={() => history.go(-1)}>
        小智同学
      </NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list" ref={listRef}>
        {/* 机器人的消息 */}
        {/* <div className="chat-item">
          <Icon name="iconbtn_xiaozhitongxue" />
          <div className="message">你好！</div>
        </div> */}

        {/* 用户的消息 */}
        {/* <div className="chat-item user">
          <img src={'http://toutiao.itheima.net/images/user_head.jpg'} alt="" />
          <div className="message">你好？</div>
        </div> */}

        {messages.map((item, index) => {
          if (item.type === 'robot') {
            return (
              <div className="chat-item" key={index}>
                <Icon name="iconbtn_xiaozhitongxue" />
                <div className="message">{item.text}</div>
              </div>
            )
          } else {
            return (
              <div className="chat-item user" key={index}>
                <img src={userProfile.photo} alt="" />
                <div className="message">{item.text}</div>
              </div>
            )
          }
        })}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <Input
          value={inputValue}
          onChange={(val) => {
            // console.log(e.target.value) => 原生change
            setInputValue(val)
          }}
          onKeyUp={handleEnter}
          className="no-border"
          placeholder="请描述您的问题"
        />
        {/* <Icon name="iconbianji" /> */}
      </div>
    </div>
  )
}

export default Chat
